iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
自我挑戰組

sass&css 30天學習日誌系列 第 12

CSS: SVG上色

  • 分享至 

  • xImage
  •  

很多網站為了不讓重要圖片不會因為縮放而失真,所以都使用SVG圖片,優點是放大不失真,可用語法去修改,在此利用css來做上色
詳情可看: http://t.cn/E7dtHFN

上色作法如下:

  1. SVG路徑
  2. MASK遮罩
    以上兩個作法部分瀏覽器不支援,使用前要多加注意!!

1. SVG路徑

當下載完SVG圖檔時候,直接把它丟到瀏覽器,打開開發者工具可看到他的原始碼,紅框處就是它的路徑,直接把它複製貼上到HTML裡面

https://ithelp.ithome.com.tw/upload/images/20200411/20107321UKX2n2jK1P.png

如下圖,可看到裡面有個defs>style>.a,裡面的fill有色碼,也就是要改顏色從這邊修改,在此把這段剪下到css做修改,另外.a可自由命名並不一定是這個名字

https://ithelp.ithome.com.tw/upload/images/20200411/20107321guk74xBtqd.png

a.純色

在此順便在這SVG外層新增一個div區塊block,並上色(綠色)
把剛剪下的.a複製到css中,並設定fill的顏色(粉紅色),這樣SVG便完成上色了

https://ithelp.ithome.com.tw/upload/images/20200411/201073217JL9nbW7dI.png

b.漸層色

使用漸層色要使用linearGradient標籤,在此範例使用當滑鼠滑過就轉為漸層色來示範
如下圖:

HTML
defs標籤內增加linearGradient標籤,並增加stop標籤,填寫offset漸層位置和顏色,記得結束要用/,效果才會出來

CSS
fill裡面的url為linearGradient標籤的id

更多說明可看:
https://wcc723.github.io/svg/2014/06/05/svg-linear-gradient/
https://www.zhangxinxu.com/wordpress/2014/07/svg-sprites-fill-color-currentcolor/

https://ithelp.ithome.com.tw/upload/images/20200411/20107321imQmdKEGTy.png

2.MASK遮罩

遮罩做法是參考codepen這篇文章
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
還有梅干桑的SVG上色文章
https://www.minwt.com/webdesign-dev/css/20664.html

MASK遮罩使用時要注意瀏覽器支援,所以在此範例中放上chrome和firefox支援的語法

can i use 說明:https://caniuse.com/#search=mask

a.純色

HTML
同樣也是在外框設綠色背景裡面放SVG的背景圖片

CSS
01.設定MASK圖片為SVG圖片
02.設定背景色(SVG顏色)
03.MASK圖片重複取消、圖片位置

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321SeZ5RePY8R.png

b.漸層色

注意!以下寫法僅供參考,要使用請參考Can i use支援程度

在hover給予漸層色的效果,此時要使用的background-image幫遮罩上色,同樣是利用SVG的圖片加上漸層的屬性,就有漸層效果

梅干桑的SVG上色教學中,圖片上漸層色中有類似寫法:
https://www.minwt.com/webdesign-dev/css/20664.html

https://ithelp.ithome.com.tw/upload/images/20200411/20107321iL09EMlaqr.png

如果在一般模式要用背景漸層,也是OK

https://ithelp.ithome.com.tw/upload/images/20200411/20107321wznS7T1gge.png

codepen: https://codepen.io/yuski/pen/aRLXxK


上一篇
CSS: transform 應用(2)
下一篇
CSS: Calc +nth選擇器應用: 欄位排版
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言